<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.global.js"></script>
    <link rel="stylesheet" href="./goods.css">
    <title>vue商品页</title>
</head>


<body>
    <div class="main">
        <div class="bigBox">
            <div class="title">商品列表</div>
            <div class="goods" v-for="item,index in goods">
                <div class="goodsList" v-if="(item.totalNum-item.buyNum)>0">
                    <div class="img"><img :src="item.image" alt=""></div>
                    <div class="goodsName">{{item.goodsName}}</div>
                    <div class="description">{{item.description}}</div>
                    <div class="price">价格：{{item.price}} ￥</div>
                    <div class="remainder">剩余：{{item.totalNum-item.buyNum}}</div>
                    <input type="number" oninput="if(value<0)value=0" id="inp" v-model="item.buyNum">
                    <div class="button">
                        <span v-if="(item.buyNum>0)" v-html="HTML"></span>
                        <button class="add" @click='add(index)'>增加</button> |
                        <button class="del" @click='del(index)'>删除</button>
                        <span>{{totalPrice}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

<script>

    Vue.createApp({
        data: () => {
            return {
                goods: [
                    { image: "https://tse4-mm.cn.bing.net/th/id/OIP-C.dVJkHfgUH21uNafGxtu1IAHaHa?w=194&h=194&c=7&r=0&o=5&pid=1.7", name: "", description: "中分头背带裤，我叫ikun你记住!", price: 2.5, totalNum: 100, buyNum: 0 },
                    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.X133hdjv-9oWzZ-3jR9ngQHaHa?w=194&h=194&c=7&r=0&o=5&pid=1.7", name: "", description: "中分头背带裤，我叫ikun你记住!", price: 2.6, totalNum: 100, buyNum: 0 },
                    { image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.5wG-WARXCGIHfo4Qsn1R1QHaHa?w=194&h=194&c=7&r=0&o=5&pid=1.7", name: "", description: "中分头背带裤，我叫ikun你记住!", price: 2.7, totalNum: 100, buyNum: 0 },
                ],
                HTML: "<button class='buy' @click='buy(index)'>购买</button> | ",
            }
        },
        methods: {
            add: function (index) {
                this.goods.push(this.goods[index])
            },
            del: function (index) {
                this.goods.splice(index, 1)
            },
        },
        computed: {
            totalPrice() {
                this.goods.forEach(element => {

                    console.log("总价：" + element.buyNum * element.price + " ￥");
                    return element.buyNum * element.price
                });
                console.log("---------");
            },

        },
        watch:{
            goods: {
                handler(newValue, oldValue) {
                    newValue.forEach(element => {
                        if((element.totalNum-element.buyNum)<=1){
                            alert("购买的数量过多");
                        }
                    });
                },
                deep: true,
            }
        }
        


    }).mount('.main')

</script>

</html>